<template>
    <div>
        <Bread></Bread>
        <el-card>
            <el-button type="primary" @click="addCate">添加分类</el-button>
            <TreeTable :data="cateList" :columns="defaultProps" :selection-type="false" :expand-type="false"
                index-text="索引" :show-row-hover="false" show-index border>
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted === false"></i>
                </template>
                <!-- 排序 -->
                <template slot="sorts" slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
                </template>
                <!-- 操作 -->
                <template slot="caozuo" slot-scope="scope">
                    <el-button type="primary" size="mini" @click="editCate(scope.row.cat_id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="delCate(scope.row.cat_id)">删除</el-button>
                </template>
            </TreeTable>

            <!-- Dialog组件 -->
            <Dialog :cateDialog="cateDialog" :cateAdd="cateAdd" @getCateList="getCateList" :options="options"
                :changedata="changedata" :editId="editId" @getData="getData"></Dialog>
        </el-card>
    </div>
</template>

<script>
import Bread from '@/components/Bread.vue'
import TreeTable from 'vue-table-with-tree-grid'
import cateAll from '@/utils/cateApi/cateAllApi'
import Dialog from '@/components/cateDialog.vue'
import cateDel from '@/utils/cateApi/cateDelApi'
export default {
    components: { Bread, TreeTable, Dialog },
    data() {
        return {
            defaultProps: [
                {
                    label: "分类名称",
                    prop: "cat_name",
                },
                {
                    label: "是否有效",
                    // 表示当前列为模板列
                    type: "template",
                    // 表示当前这一列的模板名称
                    template: "isok",
                },
                {
                    label: "排序",
                    type: "template",
                    template: "sorts",
                },
                {
                    label: "操作",
                    type: "template",
                    template: "caozuo",
                },
            ],
            query: {
                type: '',
                pagenum: 1,
                pagesize: 5
            },
            cateList: [],//所有分类数据
            /* 对话框组件基础数据 */
            cateDialog: {
                flag: false,
                type: '',
                title: ''
            },
            /* 添加分类数据 */
            cateAdd: {
                cat_pid: '',
                cat_name: '',
                cat_level: ''
            },
            options: [],//一级  二级菜单数据
            changedata: [],
            props: {
                label: 'cat_name',
                value: 'cat_id',
                checkStrictly: true
            },
            total: 0,//分页总条数
            editId:0,
        }
    },
    methods: {
        /* 获取所有分类列表数据 */
        async getCateList() {
            let res = await cateAll(this.query);
            this.cateList = res.data;
            this.total = this.cateList.length;
        },
        /* 添加分类 */
        async addCate() {
            (
                /* 对话框组件基础数据 */
                this.cateDialog = {
                    flag: true,
                    type: 'add',
                    title: '添加分类'
                }
            ),
                (
                    /* 添加分类数据 */
                    this.cateAdd = {
                        cat_pid: '',
                        cat_name: '',
                        cat_level: ''
                    }
                )
        },
        //获取所有 一级 二级数据
        async getData() {
            let res = await cateAll({ type: 2 });
            this.options = res.data;
        },
        /* 删除分类 */
        delCate(id) {
            // console.log(id);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await cateDel(id);
                if (res.meta.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getCateList();
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        /* 编辑分类 */
        editCate(id) {
            this.editId = id;
            (
                /* 对话框组件基础数据 */
                this.cateDialog = {
                    flag: true,
                    type: 'edit',
                    title: '编辑分类'
                }
            ),
                (
                    /* 添加分类数据 */
                    this.cateAdd = {
                        cat_pid: '',
                        cat_name: '',
                        cat_level: ''
                    }
                )
        }
    },
    mounted() {
        this.getCateList();
    }
}
</script>

<style lang="scss" scoped>

</style>